<template>
    <div class="item-modal">
        <modal-box @close="$emit('close')">
            <div class="title">
                添加用料到{{name}}
                <button @click="save">保存</button>
            </div>
            <div class="form">
                <label for="itemName">用料名</label>
                <input id="itemName" type="text" placeholder="输入用料名" v-model="name" />
                <label for="itemInfo">数目|备注</label>
                <input id="itemInfo" type="text" placeholder="输入数目、备注等" v-model="info" />
            </div>
        </modal-box>
    </div>
</template>

<script>
    export default {
        // props:{
        //     name:String
        // },
        data(){
            return {
                    name:"",
                    info:""
            }
        },
        methods: {
            save(){
                this.$emit("save",{
                    name:this.name,
                    info:this.info
                }),
                this.name='',
                this.info=''
            }
        } 
    }
</script>

<style lang="sass" scoped>
.item-modal
    position: fixed
    top: 0
    left: 0
    right: 0
    bottom: 0
    font-weight: bold
    .title
        display: flex
        justify-content: space-between
        font-size: 20px
        & button
            color: red
            background: transparent
    .form
        margin-top: 50px
        display: flex
        justify-content: space-between  
        font-size: 14px
        & input
            border-bottom: 1px solid #ccc
            font-size: 16px
</style>